import 'package:flutter/material.dart';
import '../services/screenAdapter.dart';
import '../modules/project/interface/controllers/interface_controller.dart';

import 'package:get/get.dart';

import 'package:dropdown_button2/dropdown_button2.dart';

class CreateInterface extends StatelessWidget {
  CreateInterface({super.key});

  final InterfaceController controller = Get.find();
  Widget _buildDropdown() {
    return DropdownButtonHideUnderline(
      child: DropdownButton2<int>(
        isExpanded: true,
        hint: Text('选择分类'),
        value: controller.selectedValue.value != 0
            ? controller.selectedValue.value
            : null, // 当值为0时设为null
        items: controller.leftProjectMenuList.map((item) {
          if (item == null)
            return const DropdownMenuItem<int>(
              value: null,
              child: SizedBox.shrink(),
            );

          final isSelected = item.id == controller.selectedValue.value;
          return DropdownMenuItem<int>(
            value: item.id,
            child: Container(
              width: double.infinity,
              padding: const EdgeInsets.symmetric(vertical: 8),
              decoration: BoxDecoration(borderRadius: BorderRadius.circular(4)),
              child: Text(
                item.name ?? '',
                style: TextStyle(
                  fontWeight: isSelected ? FontWeight.w900 : FontWeight.normal,
                ),
              ),
            ),
          );
        }).toList(),
        onChanged: (value) {
          controller.selectedValue.value = value ?? 0;
        },
        buttonStyleData: ButtonStyleData(
          height: ScreenAdapter.height(50),
          width: double.infinity,
          padding: EdgeInsets.symmetric(horizontal: 16),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8),
            color: Colors.white,
          ),
          elevation: 0,
        ),
        menuItemStyleData: MenuItemStyleData(height: ScreenAdapter.height(50)),
        dropdownStyleData: DropdownStyleData(
          maxHeight: ScreenAdapter.height(200),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8),
            color: Colors.white,
          ),
        ),
      ),
    );
  }

  Widget _buildMethodDropdown() {
    return DropdownButtonHideUnderline(
      child: DropdownButton2<int>(
        isExpanded: true,
        hint: Text('选择接口请求方式'),
        value: controller.selectedMethodValue.value, // 当值为0时设为null
        items: controller.methodList.map((item) {
          final isSelected = item['id'] == controller.selectedMethodValue.value;
          return DropdownMenuItem<int>(
            value: item['id'],
            child: Container(
              width: double.infinity,
              padding: const EdgeInsets.symmetric(vertical: 8),
              decoration: BoxDecoration(borderRadius: BorderRadius.circular(4)),
              child: Text(
                item['title'] ?? '',
                style: TextStyle(
                  fontWeight: isSelected ? FontWeight.w900 : FontWeight.normal,
                ),
              ),
            ),
          );
        }).toList(),
        onChanged: (value) {
          controller.selectedMethodValue.value = value ?? 1;
        },
        buttonStyleData: ButtonStyleData(
          height: ScreenAdapter.height(50),
          width: double.infinity,
          padding: EdgeInsets.symmetric(horizontal: 10),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8),
            color: Colors.white,
          ),
          elevation: 0,
        ),
        menuItemStyleData: MenuItemStyleData(height: ScreenAdapter.height(40)),
        dropdownStyleData: DropdownStyleData(
          maxHeight: ScreenAdapter.height(200),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8),
            color: Colors.white,
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Material(
        type: MaterialType.transparency,
        child: Container(
          width: Get.width * 0.5,
          padding: EdgeInsets.all(ScreenAdapter.width(24)),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(16),
            boxShadow: [
              BoxShadow(color: Colors.black26, blurRadius: 12, spreadRadius: 2),
            ],
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                '添加新接口',
                style: TextStyle(
                  fontSize: ScreenAdapter.fontSize(24),
                  fontWeight: FontWeight.bold,
                  color: Colors.blue[800],
                ),
              ),
              SizedBox(height: ScreenAdapter.height(24)),

              Obx(
                () => Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      "所属分组：",
                      style: TextStyle(fontWeight: FontWeight.w500),
                    ),
                    SizedBox(height: ScreenAdapter.height(8)),
                    Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(8),
                        border: Border.all(color: Colors.grey),
                      ),
                      child: _buildDropdown(),
                    ),
                  ],
                ),
              ),

              // Obx(
              //   () => Row(
              //     children: [
              //       Text("所属分组：", style: TextStyle(fontWeight: FontWeight.w500)),
              //       SizedBox(height: ScreenAdapter.height(8)),
              //       Expanded(
              //         child: Container(
              //           decoration: BoxDecoration(
              //             borderRadius: BorderRadius.circular(8),
              //             border: Border.all(color: Colors.grey),
              //           ),
              //           child: _buildDropdown(),
              //         ),
              //       ),
              //     ],
              //   ),
              // ),
              SizedBox(height: ScreenAdapter.height(24)),
              //项目名称输入
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text("接口名称", style: TextStyle(fontWeight: FontWeight.w500)),
                  SizedBox(height: ScreenAdapter.height(8)),
                  TextFormField(
                    onChanged: (value) {
                      controller.createInterfaceName.value = value;
                    },
                    decoration: InputDecoration(
                      hintText: "请输入接口名称",
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(8),
                        borderSide: BorderSide(color: Colors.grey[300]!),
                      ),
                      contentPadding: EdgeInsets.symmetric(
                        horizontal: 12,
                        vertical: 14,
                      ),
                    ),
                  ),
                ],
              ),
              SizedBox(height: ScreenAdapter.height(16)),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text("接口地址", style: TextStyle(fontWeight: FontWeight.w500)),
                  SizedBox(height: ScreenAdapter.height(8)),
                  Row(
                    children: [
                      // Expanded(
                      //   flex: 1,
                      //   child: Container(
                      //     width: Get.width * 0.1,
                      //     decoration: BoxDecoration(
                      //       borderRadius: BorderRadius.circular(8),
                      //       border: Border.all(color: Colors.grey),
                      //     ),
                      //     child: _buildMethodDropdown(),
                      //   ),
                      // ),
                      Obx(() => Container(
                          width: Get.width * 0.1,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(8),
                            border: Border.all(color: Colors.grey),
                          ),
                          child: _buildMethodDropdown(),
                        ),
                      ),
                      SizedBox(height: ScreenAdapter.height(8)),
                      Expanded(
                        flex: 9,
                        child: TextFormField(
                          onChanged: (value) {
                            controller.createInterfacePath.value = value;
                          },
                          decoration: InputDecoration(
                            hintText: "请输入接口地址",
                            border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(8),
                              borderSide: BorderSide(color: Colors.grey[300]!),
                            ),
                            contentPadding: EdgeInsets.symmetric(
                              horizontal: 12,
                              vertical: 14,
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ],
              ),

              SizedBox(height: ScreenAdapter.height(24)),
              // 操作按钮
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  TextButton(
                    onPressed: () => Get.back(),
                    child: Text(
                      '取消',
                      style: TextStyle(color: Colors.grey[700]),
                    ),
                  ),
                  SizedBox(width: ScreenAdapter.width(16)),
                  ElevatedButton(
                    onPressed: () {
                      controller.submitInterfaceForm();
                    },
                    style: ElevatedButton.styleFrom(
                      padding: EdgeInsets.symmetric(
                        horizontal: 24,
                        vertical: 12,
                      ),
                    ),
                    child: Text('确认添加'),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}
